<template>
  <div class="head-main">
    <img :src="logo1" alt="" />
    <div class="menu-box">
      <div
        class="item"
        :class="currentPath == item.path ? 'active' : ''"
        @click="bindClick(item)"
        v-for="item of menuList"
        :key="item.name"
      >
        {{ item.name }}
      </div>
    </div>

    <div class="registration">免费注册</div>
    <div class="tel" v-if="tel">服务热线：{{ tel }}</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";
import router from "@/route";
const menus = [
  {
    name: "首页",
    path: "/home",
  },
  {
    name: "解决方案",
    path: "/",
  },
  {
    name: "应用案例",
    path: "/",
  },
  {
    name: "物业百科",
    path: "/",
  },
  {
    name: "关于我们",
    path: "/about",
  },
];
interface MenuProp {
  path: string;
  name: string;
}

export default defineComponent({
  props: {
    tel: String,
    logo1: String,
  },
  setup(props) {
    const menuList = reactive<MenuProp[]>(menus);
    const currentPath = ref<string>("/home");
    if (router.currentRoute.value.path != "/") {
      currentPath.value = router.currentRoute.value.path;
    }
    const bindClick = (item: MenuProp) => {
      router.replace(item.path);
    };
    watch(
      () => router.currentRoute.value,
      (newVal, old) => {
        currentPath.value = newVal.path;
      }
    );
    return { menuList, bindClick, currentPath };
  },
});
</script> 
<style scoped lang="less">
.head-main {
  width: @containerWidth;
  margin: 0 auto 6px auto;
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  img {
    height: 50px;
    width: auto;
    margin-right: 5px;
  }
  .menu-box {
    line-height: 1.5;
    display: flex;
    margin-right: auto;

    .item {
      margin-left: 50px;
      cursor: pointer;
      font-size: 16px;
      color:  @textColor;
    }
    .item.active {
      color: @titleColor;
    }
  }
  .registration {
    cursor: pointer;
    color: red;
  }
  .tel {
    margin-left: 58px;
    font-size: 14px;
  }
}
</style>

